<template>
    <el-form :model="form" label-width="80px" class="animate__animated animate__backInDown form">
        <el-form-item>
            <template #label><span class="form-label">用户名</span></template>
            <el-input v-model="form.username" placeholder="请输入用户名（登录名）" clearable />
        </el-form-item>
        <el-form-item>
            <template #label><span class="form-label">密码</span></template>
            <el-input v-model="form.password" type="password" show-password placeholder="请输入密码" clearable />
        </el-form-item>
        <el-form-item>
            <template #label><span class="form-label">姓名</span></template>
            <el-input v-model="form.name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item>
            <template #label><span class="form-label">手机号</span></template>
            <el-input v-model="form.phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item>
            <template #label><span class="form-label">性别</span></template>
            <el-select v-model="form.sex" placeholder="请选择性别" clearable style="width: 100%">
                <el-option v-for="option in genderOptions" :label="option.label" :value="option.value" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <template #label><span class="form-label">邮箱</span></template>
            <el-input v-model="form.email" placeholder="请输入邮箱" clearable />
        </el-form-item>
        <el-form-item>
            <template #label><span class="form-label">生日</span></template>
            <el-date-picker v-model="form.birthday" type="date" placeholder="请选择生日" style="width: 100%" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
            <template #label><span class="form-label">城市</span></template>
            <lemon-city v-model:provinceId="form.provinceId" v-model:cityId="form.cityId" v-model:countyId="form.countyId" />
        </el-form-item>
        <el-form-item>
            <template #label><span class="form-label">地址</span></template>
            <el-input v-model="form.address" placeholder="请输入地址" clearable />
        </el-form-item>
        <el-form-item>
            <div class="form-btn">
                <el-button type="primary" round @click="onRegist">注册</el-button>
                <el-button round @click="goLogin">去登录</el-button>
            </div>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive, inject } from "vue";
import { encrypt } from "@/utils/encrypt";
import { genderOptions, delay } from "@/utils/common";

//获取自定义全局方法
const { axios, baseURL, emitter } = inject<any>("method");

//用户form
const form = reactive({
    username: "",
    password: "",
    name: "",
    phone: "",
    email: "",
    sex: "",
    birthday: "",
    provinceId: null,
    cityId: null,
    countyId: null,
    address: "",
});

//用户注册
const onRegist = async () => {
    //拷贝form
    const params = { ...form, password: encrypt(form.password) };
    //处理密码
    const data = await axios.put(`${baseURL}/register`, params);
    if (data?.data?.success) {
        emitter.emit("msg-success", { message: data?.data?.data, duration: 3000 });
        await delay(3000);
        goLogin();
    } else {
        emitter.emit("msg-error", { message: data?.data?.message, duration: 3000 });
    }
};

//使用defineEmits注册一个自定义事件
const emit = defineEmits(["switchPage"]);

//去登录
const goLogin = () => emit("switchPage", true);
</script>

<style scoped lang="less">
.form-label {
    color: white;
}
.form :deep(.el-input__wrapper) {
    background-color: rgba(252, 251, 251, 0.7);
}
.form :deep(.el-select__wrapper) {
    background-color: rgba(252, 251, 251, 0.7);
}
.form {
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-width: none;

    .form-btn {
        text-align: center;
        margin-right: 40px;
        width: 100%;

        .el-button {
            width: 25%;
        }
    }
}
</style>
